<template>
  <div class="container">
    <Card style="margin: 10px 10px 30px;">
      <h3 style="margin-bottom: 10px">试题录入</h3>
      <hr />
      <Form :label-width="80"  :model="formData" ref="form" style="margin: 20px 40px 10px" :rules="ruleValidate">
        <Form-item label="学科" prop="subjectID">
          <Select placeholder="请选择" v-model="formData.subjectID" @on-change="chengeSelect" style="width: 400px">
            <Option :value="item.value" v-for="item in simpleList" :key="item.id">{{ item.label }} </Option>
          </Select>
        </Form-item>
        <Form-item label="目录" prop="catalogID">
          <Select placeholder="请选择" v-model="formData.catalogID" style="width: 400px">
            <Option :value="item.value" v-for="item in twoSimple" :key="item.id">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="企业简称">
          <Input  style="width: 400px"></Input>
        </Form-item>
        <Form-item label="城市" prop="province">
          <Select style="width: 100px; margin-right: 10px" @on-change="changeCitys" v-model="formData.province">
            <Option v-for="item in provincesList" :value="item" :key="item">{{ item }}</Option>
          </Select>
          <Select style="width: 100px" v-model="formData.city">
            <Option v-for="item in citysList" :value="item" :key="item">{{ item }}</Option>
          </Select>
        </Form-item>
        <Form-item label="方向" prop="direction">
          <Select placeholder="请选择" v-model="formData.direction" style="width: 400px">
            <Option :value="item" v-for="item in direction" :key="item">{{ item }}</Option>
          </Select>
        </Form-item>
        <Form-item label="题型">
          <RadioGroup v-model="formData.questionType">
            <Radio :label="item.value" v-for="item in questionType" :key="item.value">
              <span>{{ item.label }} </span>
            </Radio>
          </RadioGroup>
        </Form-item>
        <!-- 难度 -->
        <Form-item label="难度">
          <RadioGroup v-model="formData.difficulty">
            <Radio :label="item.value" v-for="item in difficulty" :key="item.value">
              <span>{{ item.label }} </span>
            </Radio>
          </RadioGroup>
        </Form-item>
        <!-- 富文本编辑器 -->
        <Form-item label="题干" prop="question">
          <quill-editor ref="myQuillEditor"
            @blur="onEditorBlur($event)"
           v-model="formData.question" style="height: 200px" />
        </Form-item>
        <!-- 选项 -->
        <Form-item label="选项:" style="margin-top: 100px" v-if="formData.questionType !== 3">
          <div v-if="formData.questionType === 1 ">
            <RadioGroup v-model="oneAnswer" vertical @on-change="changeRadio($event)">
              <Radio :label="item.code" v-for="item in formData.options" :key="item.id" style="margin-top: 20px">
                <span>{{ item.code }}</span>
                <Icon type="social-apple"></Icon>
                <Input style="margin-left: 10px; width: 200px" :value="item.title"  v-model="item.title"/>
                <Upload action="#" style="display:inline-block;margin-left:10px">
                <Button icon="ios-cloud-upload-outline">上传图片</Button>
              </Upload>
              </Radio>
            </RadioGroup>
          </div>
          <!-- 多选 -->
          <div v-else-if="formData.questionType === 2">
            <CheckboxGroup
            v-model="oneAnswers"
            @on-change="changeBox"
            v-for="item in formData.options" :key="item.id" style="margin-top: 10px">
            <!-- 多选框 -->
              <Checkbox :label="item.code" > </Checkbox>
              <Input style="margin-left: 10px; width: 200px" :value="item.title" />
              <Upload action="#" style="display:inline-block;margin-left:10px">
                <Button icon="ios-cloud-upload-outline">上传图片</Button>
              </Upload>
            </CheckboxGroup>
          </div>
          <!-- 简答 -->
          <div v-else>
          </div>
          <Button type="error" style="margin-top:20px" v-if="formData.questionType !== 3"
          @click="addButton"
          :disabled="formData.questionType == 1">+增加选项与答案</Button>
        </Form-item>
       <Form-item label="解析视频">
          <Input v-model="formData.videoURL" style="width: 400px"></Input>
        </Form-item>
        <Form-item label="答案解析" prop="answer">
          <quill-editor ref="myQuillEditor" v-model="formData.answer" style="height: 200px" />
        </Form-item>
        <FormItem label="题目备注" style="margin-top: 100px" prop="remarks">
            <Input   v-model="formData.remarks" remarks type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
        </FormItem>
         <FormItem label="试题标签" style="margin-top: 20px" prop="tags">
            <Input   v-model="formData.tags" remarks type="text" :autosize="{minRows: 2,maxRows: 5}"></Input>
        </FormItem>
         <Button type="primary" @click="upload">确认提交</Button>
      </Form>
    </Card>
  </div>
</template>

<script>
import { direction, questionType, difficulty } from '@/api/hmmm/constants.js' // 假数据 方向,题型，难度
import { detail, update, add } from '@/api/hmmm/questions.js' // 获取试题详情,修改试题, 添加试题
import { provinces, citys } from '@/api/hmmm/citys.js' // 城市数据
import { simple as twoSimple } from '@/api/hmmm/directorys.js' // 目录简单列表
import { simple } from '@/api/hmmm/subjects.js' // 学科简单列表
export default {
  data () {
    return {
      formData: {
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ], // 答案列表
        questionType: 1, // 题型 单选还是多选
        difficulty: 1, // 难度
        city: '', // 县，区
        province: '', // 市
        answer: '', // 答案解析
        subjectID: '', // 学科id
        catalogID: '', // 二级目录
        direction: '', // 方向
        remarks: '', // 题目备注
        videoURL: '', // 视频地址
        question: '', // 题干
        tags: ''// 标签
      },
      ascNum: 68, // ASCII 码
      oneAnswer: '', // 答案单选
      oneAnswers: [], // 答案多选
      answerList: [], // 答案列表
      direction, // 方向
      difficulty, // 难度
      questionType, // 题型
      provincesList: [], // 所有城市
      citysList: [], // 区县列表
      twoSimple: [], // 目录
      simpleList: [], // 学科简单列表
      ruleValidate: { // 验证规则
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change', type: 'number' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change', type: 'number' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'change' }],
        province: [{ required: true, message: '请选择方向', trigger: 'change' }],
        city: [{ required: true, message: '请选择城市', trigger: 'change' }],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入标签', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      }

    }
  },
  methods: {
    async getSimple () { // 获取学科列表
      const { data } = await simple()
      this.simpleList = data
    },
    async chengeSelect (value) { // 二级目录
      const { data } = await twoSimple({ subjectID: value })
      this.twoSimple = data // 二级目录
    },
    async changeCitys (value) { // 选择区县
      this.citysList = await citys(value)
    },
    // 富文本编辑器 校验事件
    onEditorBlur (e) {
      // validatePass()
    },
    // 提交
    async  upload () {
      this.formData.questionType = this.formData.questionType + ''
      this.formData.difficulty = this.formData.difficulty + ''
      this.$refs.form.validate(async isOk => {
        if (isOk) {
          if (this.$route.query.id) { // 有id 是修改
            await update(this.formData)
            this.$message.success('修改成功')
          } else {
            // console.log(1)
            await add({ ...this.formData, enterpriseID: 17 })
            this.$message.success('添加成功')
          }
          this.$router.push({
            name: 'questions-list'
          })
          this.resetForm()// 清除表单
        } else {
          this.$message.error('该数据必写')
        }
      })
    },
    changeRadio (e) { // 修改选中框 单选
      this.formData.options.forEach(item => {
        if (item.code === e) {
          item.isRight = true
        } else {
          item.isRight = false
        }
      })
    },
    changeBox (Ble) { // 修改按钮 多选框
      this.oneAnswers = Ble
      this.formData.options.forEach(item => {
        item.isRight = this.oneAnswers.some(key => {
          return item.code === key
        })
      })
    },
    // 添加按钮
    addButton () {
      this.ascNum++
      this.formData.options.push({
        code: String.fromCharCode(this.ascNum),
        title: '',
        img: '',
        isRight: false
      })
    },
    // 清除表单
    resetForm () {
      this.ascNum = 68
      this.formData = {
        options: [
          { isRight: true, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ], // 答案列表
        questionType: 1, // 题型 单选还是多选
        difficulty: 1, // 难度
        city: '', // 县，区
        province: '', // 市
        answer: '', // 题目备注
        subjectID: '', // 学科id
        catalogID: '', // 二级目录
        direction: '', // 方向
        remarks: '', // 题目备注
        videoURL: '', // 视频地址
        question: '' // 富文本编辑器
      }
    }
  },
  async created () {
    await this.getSimple() // 获取学科
    this.provincesList = await provinces() // 城市数据
    if (this.$route.query.id) { // 如果有 id  就是修改试题
      const { data } = await detail(this.$route.query)
      await this.chengeSelect(data.subjectID) // 获取 二级目录
      this.citysList = await citys(data.province) // 获取区县
      if (data.questionType === '1') { // 单选
        data.questionType = data.questionType * 1
        data.options.forEach(item => {
          if (item.isRight === 1) {
            this.oneAnswer = item.code
          }
        })
      } else { // 多选
        data.questionType = data.questionType * 1
        const arr = []
        data.options.forEach(item => {
          if (item.isRight === 1) {
            arr.push(item.code)
          }
        })
        this.ascNum = data.options[data.options.length - 1].code.charCodeAt()
        console.log(data.options[data.options.length - 1].code)
        this.oneAnswers = arr
      }
      data.difficulty = data.difficulty * 1
      this.formData = data
      this.answerList = data.options // 所有答案列表
    }
  }
}
</script>

<style scoped >
.upload {
  display: block;
  justify-content: space-around;
  align-items: center;
}
</style>
